<template>
            <ul class="todo-main">
                <!-- 使用 transition-group-->
                <!-- <transition-group name="todo" appear>
                    <MyItem 
                    v-for="todo in todos" 
                    :key="todo.id" 
                    :todoObj="todo" 
                />
                </transition-group> -->

                <!-- 使用第三方动画 -->
                <transition-group name="animate__animated animate__bounce" appear
                enter-active-class="animate__rubberBand" leave-active-class="animate__fadeOutDown">
                    <MyItem 
                    v-for="todo in todos" 
                    :key="todo.id" 
                    :todoObj="todo" 
                />
                </transition-group>
            </ul>
</template>
<script>
import 'animate.css';
import MyItem from './MyItem.vue';
export default {
    name:'MyList',
    components:{MyItem},
    props:['todos']
}
</script>
<style scoped>
    /*main*/
    .todo-main {
    margin-left: 0px;
    border: 1px solid #ddd;
    border-radius: 2px;
    padding: 0px;
    }

    .todo-empty {
    height: 40px;
    line-height: 40px;
    border: 1px solid #ddd;
    border-radius: 2px;
    padding-left: 5px;
    margin-top: 10px;
    }

.todo-enter-active{
    animation: lining 1s linear
}
.todo-leave-active{
    animation: lining 1s linear reverse
}
@keyframes lining {
    from{
        transform: translateX(100%);
    }
    to{
        transform: translateX(0);
    }
}

</style>